
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Natively use YUI Gallery Modules</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Natively use YUI Gallery Modules</h1>

<div class="exampleIntro">
	<p>This example shows how to natively use a YUI Gallery module.</p>
<p>It will load images from Flickr using the Gallery YQL module.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->


<style>
#results img {
    margin: .5em;
    border: 1px solid black;
}

#results {
    border: 1px solid black;
    margin: 1em;
    padding: 1em;
}
</style>

<div id="results">Loading photos from YQL, please wait...</div>


<script>
YUI({filter:"debug", logInclude: {"example":true}}).use('node', 'gallery-yql', function(Y) {
    new Y.yql('select * from flickr.photos.search where tags = "yuiconf2009"', function(r) {
        if (r.query) {
            if (r.query.results) {
                var res = Y.one('#results'),
                    content = '';

                Y.each(r.query.results.photo, function(v) {
                    var img = '<img src="http:/'+'/static.flickr.com/' + v.server + '/' + v.id + '_' + v.secret + '_s.jpg">';
                    content += '<a href="http://flickr.com/photos/' + v.owner + '/' + v.id + '" title="' + v.title + '">' + img + '</a>';
                });

                res.setContent(content);
            }
        }
    });
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
